<template>
	<view class="main">
		<u-navbar
		title=" " 
		:is-back="false"
		title-size="34"
		:border-bottom="false"
		:background="background">
			<view class="header">
				<u-icon name="arrow-left" size="28" @tap="black"></u-icon>
				<view class="title">添加作品</view>
				<view class="ritbtn"></view>
			</view>
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="150">
				<view class="form-cont">
					<u-form-item label="标题" prop="intro">
						<u-input v-model="form.intro" placeholder="请输入"/>
					</u-form-item>
				</view>
				<view class="title">
					<text>作品描述</text>
				</view>
				<view class="form-cont">
					<u-form-item label="" prop="intro" :border-bottom="false">
						<u-input 
						v-model="form.intro" 
						type="textarea" 
						placeholder="请输入作品描述，可以从作品系统架构、业务模型、功能结构主要职责、成果等方面进行介绍，字数不低于120字符。"/>
					</u-form-item>
				</view>
				<view class="title">
					<u-form-item label="" prop="intro" :border-bottom="false">
						<u-upload :action="action" :file-list="fileList" upload-text="上传作品截图"></u-upload>
					</u-form-item>
				</view>
				
			</u-form>
			<button class="submit" type="default" @tap="submit">添加</button>
		</view>
		<!-- 时间弹窗 -->
		<u-picker :params="params" v-model="start_time" mode="time"></u-picker>
		<u-picker :params="params" v-model="end_time" mode="time"></u-picker>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				background: {
					backgroundColor:"#4A90E2"
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				start_time:false,
				end_time:false,
				action: '',//上传图片地址
				fileList: [],//已上传图片列表
				form: {
					name: '',
					intro: '',
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					intro: [
						{
							min: 5, 
							message: '简介不能少于5个字', 
							trigger: 'change'
						}
					]
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onPullDownRefresh() {
		    console.log('refresh');
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			//选择开始时间
			startTime(){
				this.start_time = true
			},
			endTime(){
				this.end_time = true
			},
			//返回
			black(){
				uni.navigateBack()
			},
			toPage(url,islogin=false){
				this.more_show = false
				if(islogin){
					uni.navigateTo({
					    url: '/pages/Login/index'
					});
					return
				}
				uni.navigateTo({
				    url: url
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		padding:30rpx;
		background-color: #f9f9f9;
		.header{
			padding: 0 30rpx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #FFFFFF;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 34rpx;
			.title{
				font-size: 34rpx;
			}
			.ritbtn{
				font-size: 28rpx;
				position: relative;
				z-index: 999999;
			}
		}
		.content{
			
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 20rpx;
				text{
					font-size: 28rpx;
					font-weight: 500;
					color: #4C4C4C;
					line-height: 40rpx;
				}
			}
			.form-cont{
				padding: 0 20rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				/deep/.u-input__textarea{
					min-height: 292rpx!important;
				}
				.prove_title{
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
					line-height: 33rpx;
				}
				.prove_cont{
					/deep/input{
						font-size: 24rpx;
						font-weight: 500;
						color: #C7C7C7;
						line-height: 33rpx;
						border-bottom: 1px solid #C7C7C7;
						margin-bottom: 30rpx;
					}
				}
				.tips{
					font-size: 20rpx;
					font-weight: 400;
					color: #C7C7C7;
					line-height: 28rpx;
					padding-bottom: 20rpx;
				}
			}
			.submit{
				margin: 30rpx 0;
				height: 100rpx;
				background: #4A90E2;
				border-radius: 50rpx;
				font-size: 34rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 100rpx;
				&::after{
					border: 0;
				}
			}
		}
		
	}
</style>
